import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import {
  AppOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';

import style from './index.module.css';

export default function Tabbar(props) {
  const { pathname } = useLocation();
  const navigate = useNavigate();
  // 截取一级路径
  let firstPath = '/' + pathname.split('/')[1];
  return (
    <>
      <div className={style.tabbar}>
        <TabBar
          activeKey={firstPath}
          onChange={(key) => {
            navigate(key);
          }}
        >
          <TabBar.Item
            key='/film'
            title='电影'
            icon={<AppOutline />}
          />
          <TabBar.Item
            key='/cinema'
            title='影院'
            icon={<UnorderedListOutline />}
          />
          <TabBar.Item
            key='/center'
            title='我的'
            icon={<UserOutline />}
          />
        </TabBar>
      </div>
    </>
  );
}
